<template>
<!--面包屑-->
<div style="margin-bottom: 30px">
  <el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>
    <router-link to="/Materials/ShowMaterialRequisition">物资领用</router-link>
  </el-breadcrumb-item>
  <el-breadcrumb-item>修改领用申请</el-breadcrumb-item>
  </el-breadcrumb>
</div>



  <el-form ref="ruleFormRef" style="max-width: 600px" :model="form" :rules="rules" label-width="auto" class="demo-ruleForm" :size="formSize" status-icon>
  
  <el-form-item label="标题" prop="title">
    <el-input v-model="form.title" placeholder="请输入领用标题" />
  </el-form-item>

  <el-form-item label="用途描述" prop="usageDescription">
    <el-input v-model="form.usageDescription" :rows="3" type="textarea"/>
  </el-form-item>

  <el-form-item label="备注" prop="materialRequisitNotes">
    <el-input v-model="form.materialRequisitNotes" :rows="3" type="textarea"/>
  </el-form-item>

  <el-form-item label="选择领用物品" prop="materialStoreId">
      <el-select v-model="form.materialStoreId" placeholder="请选择要领用的物品" style="width: 430px;">
        <el-option v-for="item in StoreData" :key="item.materialStoreId" :label="item.nameOfGoods" :value="item.materialStoreId"></el-option>
      </el-select>
       <el-button type="primary" @click="AddInfo()">添加</el-button>
    </el-form-item>

  <div style="margin-left: 95px;margin-bottom: 30px;">
    <table border style="border-collapse: collapse;width: 100%;background-color:gainsboro;text-align: center;" >
    <thead></thead>
    <tbody>
      <tr>
        <td>货物名称</td>
        <td>类型</td>
        <td>材质</td>
        <td>规格</td>
        <td>产地</td>
        <td>仓库数量</td>
        <td>领用数量</td>
        <td>操作</td>
      </tr>

      <tr v-for="(item,index) in sotreDataListByIdData" :key="item.materialRequisitionId">
        <td>{{ item.nameOfGoods }}</td>
        <td>{{ item.materialStoreType }}</td>
        <td>{{ item.material }}</td>
        <td>{{ item.specifications }}</td>
        <td>{{ item.countryName }}</td>
        <td>{{ item.number }}</td>
        <td>
          <el-input v-model="NumberArray[index]" placeholder="请输入领用数量"></el-input>
        </td>
        <td>
          <el-link target="_blank" @click="deleteInfo(item.materialStoreId)">删除</el-link>
          </td>
      </tr>
    </tbody>
  </table>
  </div>
  <el-button type="primary" @click="submitForm">提交修改</el-button>
  <el-button @click="resetForm">取消操作</el-button>
</el-form>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, computed } from 'vue'
import axios from 'axios';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'

import {useRoute,useRouter} from 'vue-router'

const route = useRoute();
const router = useRouter();
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
//定义数量数组
const NumberArray: any = ref([])

onMounted(() => {
    getMaterialRequisitionById()

  getUserSelect()
  getStoreList()
  })

const form: any = reactive({
  materialStoreId: '',
  materialRequisitionId: '',
  title: "",
  usageDescription: "",
  materialRequisitNotes: "",
  approvalStatus: 10,
  materialRequisitionDtos: []
})

  //入库列表==>查询id
  const StoreData:any=ref([])
  const getStoreList = () => {
  
    axios.get('/mread/api/ShowMaterialStore/GetStoreList', {
      params: {
        pageIndex: form.pageIndex,
        pageSize: form.pageSize,
      }
    }).then(res=>{
      //console.log(res);
      StoreData.value = res.data.data.list;
    }).catch(err=>{
      console.log(err);
      
    })    
}

//点击添加后根据ID查询
const AddInfo = () => {
  axios.get('/mread/api/ShowMaterialStore/GetMaterialStoreByIdList?MaterialStoreId='+form.materialStoreId).then(res=>{
    console.log(res);
    sotreDataListByIdData.value.push(res.data.data[0]) ;

  }).catch(err=>{
    console.log(err);
    
  })    
}
  
  //校验
  const rules = reactive<FormRules>({
    title: [
      { required: true, message: '请输入领用标题', trigger: 'blur' },
    ],
    usageDescription: [
      { required: true, message: '请输入用途描述', trigger: 'blur' },
    ],
  })

  //反填
  const getMaterialRequisitionById = () => {
    axios.get('/mread//api/ShwoMaterialRequisition/ReverseMaterialRequisition', {
      params: {
        MaterialRequisitionId:route.query.materialRequisitionId
      }
    }).then(res=>{
    console.log(res);
      const materialData: any = res.data.data;
      let materialRequisitionId:any =route.query.materialRequisitionId;  
      form.usageDescription= materialData.usageDescription;
      form.materialRequisitNotes = materialData.materialRequisitNotes;
      form.materialRequisitionId=materialData.materialRequisitionId;
      GetsotreDataList(materialRequisitionId)
  }).catch(err=>{
    console.log(err);
    
  })    
  }
  //反填物品领用信息
  const sotreDataListByIdData:any=ref([])
const GetsotreDataList = (materialRequisitionId: number) => {
  axios.get('/mread/api/ShwoMaterialRequisition/ReverseStorageMaterials?MaterialRequisitionId=' + materialRequisitionId).then(res => {
    console.log(res);
    if (res.data.data.length > 0) {
      res.data.data.forEach((item: any) => {
        // 初始化 NumberArray
        NumberArray.value = res.data.data.map((item:any) => item.quantityReceived.toString());
        sotreDataListByIdData.value.push(item);
        // 如果需要，也可以为每个item设置数量，但这取决于您的具体需求
        // 例如，如果有一个特定的数组来存储数量，您可能需要按某种方式关联这些数量
      });

      form.title = res.data.data[0].title;
    }
  }).catch(err => {
    console.log(err);

  })
}

  //用户名称列表
  const UserSelectData: any = ref([])
    const username: any = ref([])
const getUserSelect=()=>{
  axios.get('http://1.117.93.87:8000/rbacdu/api/User/UserSelectShow').then(res=>{
    //console.log(res);
    UserSelectData.value = res.data.data
    username.value =UserSelectData.value.filter((o:any)=>o.name!=localStorage.getItem('username'));
  }).catch(err=>{
    console.log(err);
    
  })    
}

//提交修改
//修改数组
const MaterialsArray: any = ref([])
const submitForm = () => {
  MaterialsArray.value = sotreDataListByIdData.value.map((x: any, index: any) => ({
        ...x,
    number: NumberArray.value[index],
  }));
      console.log(MaterialsArray.value);
      
      MaterialsArray.value.map((x:any)=>{
        let dataInfo = {
          materialStoreId: x.materialStoreId,
          QuantityReceived: x.number,
        };
        form.materialRequisitionDtos.push(dataInfo)
      })
                  console.log(form);
                    
      axios.post('/mwrite/api/MaterialRequisition/UpdateMaterialRequisition',form).then(res => {
        console.log(res);
        if (res.data.code > 0) {
          ElMessage.success("修改成功!")
          router.push('/Materials/ShowMaterialRequisition')
        } else {
          ElMessage.error("修改失败!")
          return
        }

      }).catch(err => {
        console.log(err);

      })
}

//删除多余行
const deleteInfo = (materialStoreId: number) => {
  sotreDataListByIdData.value = sotreDataListByIdData.value.filter((x: any) => x.materialStoreId !== materialStoreId);
}



//取消操作
const resetForm = () => {
  router.push('/Materials/ShowMaterialRequisition')
}

</script>

<style scoped>

</style>